<template>
    <div>
        <!-- 查询和其他操作 -->
        <div class="filter-container" style="margin: 10px 0 10px 10px;">
            <el-input clearable class="filter-item" style="width: 200px;" v-model="keyword"
                placeholder="请输入分类名称"></el-input>
            <el-button class="filter-item" type="primary" icon="el-icon-search" v-permission="'/pictureSort/getList'"
                style="margin-left: 10px" @click="handleFind">查找</el-button>
            <el-button class="filter-item" @click="handleAdd" type="warning" icon="el-icon-edit"
                v-permission="'/pictureSort/add'">添加</el-button>
        </div>

        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="selection"></el-table-column>

            <el-table-column label="序号" width="60" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                </template>
            </el-table-column>

            <el-table-column label="标题图" width="160" align="center">
                <template slot-scope="scope">
                    <img v-if="scope.row.photoUrl" :src="scope.row.photoUrl" style="width: 130px;height: 70px;" />
                </template>
            </el-table-column>

            <el-table-column label="分类名" width="160" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.name }}</span>
                </template>
            </el-table-column>

            <el-table-column label="排序" width="100" align="center">
                <template slot-scope="scope">
                    <el-tag type="warning">{{ scope.row.sort }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="图片选择器显示" width="150" align="center">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.isShow == 1" type="success">{{ '是' }}</el-tag>
                    <el-tag v-else>{{ '否' }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="创建时间" width="160" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.createTime }}</span>
                </template>
            </el-table-column>

            <el-table-column label="更新时间" width="160" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.updateTime }}</span>
                </template>
            </el-table-column>

            <el-table-column label="状态" width="100" align="center">
                <template slot-scope="scope">
                    <template v-if="scope.row.status == 1">
                        <span>正常</span>
                    </template>
                    <template v-if="scope.row.status == 2">
                        <span>推荐</span>
                    </template>
                    <template v-if="scope.row.status == 0">
                        <span>已删除</span>
                    </template>
                </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right" min-width="315">
                <template slot-scope="scope">
                    <el-button type="success" size="small" @click="handleManager(scope.row)">图片列表</el-button>
                    <el-button type="warning" size="small" @click="handleStick(scope.row)"
                        v-permission="'/pictureSort/stick'">置顶</el-button>
                    <el-button type="primary" size="small" @click="handleEdit(scope.row)"
                        v-permission="'/pictureSort/edit'">编辑</el-button>
                    <el-button type="danger" size="small" v-permission="'/pictureSort/delete'">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <div class="block">
            <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize"
                layout="total, prev, pager, next, jumper" :total="total" align="right">
            </el-pagination>
        </div>

        <!-- 添加或修改对话框 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules" ref="form">

                <el-form-item label="标题" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="form.name" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="封面" :label-width="formLabelWidth">
                    <div class="imgBody" v-if="photoList">
                        <i class="el-icon-error inputClass" v-show="icon" @click="deletePhoto()"
                            @mouseover="icon = true"></i>
                        <img @mouseover="icon = true" @mouseout="icon = false" :src="photoList"
                            style="display:inline; width: 195px;height: 105px;" />
                    </div>
                    <!-- <div v-else class="uploadImgBody" @click="checkPhoto">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </div> -->
                    <el-upload v-else ref="upload" action="http://localhost:9528/dev-api/mogu-picture/file/uploadPicture"
                        :file-list="fileList" :auto-upload="false" :limit="1" :on-success="uploadSuccess">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <el-button style="margin-left: 10px;" size="small" type="success"
                            @click="submitUpload">上传到服务器</el-button>
                    </el-upload>
                </el-form-item>

                <el-form-item label="图片选择器显示" :label-width="formLabelWidth" prop="isShow">
                    <el-radio-group v-model="form.isShow" size="small">
                        <el-radio v-for="item in yesNoDictList" :key="item.uid" :label="parseInt(item.dictValue)" border>{{
                            item.dictLabel }}</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="排序" :label-width="formLabelWidth" prop="sort">
                    <el-input v-model="form.sort" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="tip" :label-width="formLabelWidth" v-if="!isEditForm">
                    <el-tag type="success">首次创建图片分类，可以先不设置封面，待到有图片时在设置即可</el-tag>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getPictureSortList, stickPictureSort, editPictureSort } from '@/api/pictureSort'
import { getListByDictTypeList } from '@/api/sysDictData'
export default {
    name: '',
    created() {
        this.getDictList();
        this.pictureSortList()
    },
    data() {
        return {
            tableData: [],
            form: {
                uid: null,
                name: null,
                fileUid: null
            },
            loading: true,
            dialogVisible: false, //控制增加框和修改框的显示
            currentPage: 1,
            total: null,
            pageSize: 10,
            keyword: "",
            title: "增加分类",
            formLabelWidth: "120px", //弹框的label边框
            dialogFormVisible: false,
            isEditForm: false,
            photoVisible: false, //控制图片选择器的显示
            photoList: '',
            yesNoDictList: [], // 是否字典
            fileIds: "",
            icon: false, //控制删除图标的显示
            isFirstPhotoVisible: true, // 图片选择器是否首次显示【用于懒加载】
            rules: {
                name: [
                    { required: true, message: '标题不能为空', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在1到20个字符' },
                ],
                sort: [
                    { required: true, message: '排序字段不能为空', trigger: 'blur' },
                    { pattern: /^[0-9]\d*$/, message: '排序字段只能为自然数' },
                ]
            },
            fileList: [],
            file: {}
        };
    },

    methods: {
        // 图片分类列表
        pictureSortList() {
            let params = {}
            params.keyword = this.keyword
            params.currentPage = this.currentPage
            params.pageSize = this.pageSize
            getPictureSortList(params).then(res => {
                this.tableData = res.data.records
                this.currentPage = res.data.current
                this.pageSize = res.data.size
                this.total = res.data.total
            })
        },
        handleFind() {
            this.pictureSortList();
        },
        // 分页查询
        handleCurrentChange() {
            this.pictureSortList();

        },
        handleStick(row) {
            this.$confirm("此操作将会把该分类放到首位, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(res => {
                let params = {}
                params.uid = row.uid
                stickPictureSort(params).then(res => {
                    if (res.code == 200) {
                        this.pictureSortList()
                        // this.$commonUtil.message.success(res.message)
                    }
                })
            }).catch(error => { })
        },
        handleEdit(row) {
            this.title = '编辑分类'
            this.dialogFormVisible = true
            this.isEditForm = true
            this.form = row
            this.photoList = row.photoUrl
        },
        handleAdd() {
            this.title = '添加分类'
            this.dialogFormVisible = true
            this.form = this.getFormObject()
            this.isEditForm = false
            this.photoList = ''
        },
        getDictList() {
            let dictTypeList = ['sys_yes_no']
            getListByDictTypeList(dictTypeList).then(res => {
                if (res.code == 200) {
                    let dictMap = res.data;
                    this.yesNoDictList = dictMap.sys_yes_no
                    if (dictMap.sys_yes_no.defaultValue) {
                        this.yesNoDefault = parseInt(dictMap.sys_yes_no.defaultValue);
                    }
                }
            })

        },
        submitForm() {
            if (this.isEditForm) {
                // 编辑图片分类
                editPictureSort(this.form).then(res => {
                    this.dialogFormVisible = false
                    this.pictureSortList()
                })
            } else {
                // 新增图片分类

            }
        },
        getFormObject: function () {
            let formObject = {
                uid: null,
                name: null,
                fileUid: null,
                sort: 0,
                isShow: this.yesNoDefault,
            };
            return formObject;
        },
        //弹出选择图片框
        checkPhoto() {
            this.photoList = '';
            this.fileIds = "";
            this.photoVisible = true;
            this.isFirstPhotoVisible = false
        },
        handleManager(row) {
            // 路由跳转
            let uid = row.uid
            this.$router.push({
                path: 'picture',
                query: {
                    pictureSortUid: uid
                }
            })
        },
        deletePhoto() {
            this.photoList = ''
            this.fileUid = ''
        },
        // 上传到服务器
        submitUpload() {
            this.$refs.upload.submit();
        },
        uploadSuccess(response, file, fileList) {
            console.log(response);
            console.log(file);
            console.log(fileList);
            let uploadFile = JSON.parse(response.message)
            this.form.fileUid = uploadFile.uid
        }
    }
}
</script>

<style scoped>
.imgBody {
    width: 195px;
    height: 105px;
    border: solid 2px #ffffff;
    float: left;
    position: relative;
}

.uploadImgBody {
    margin-left: 5px;
    width: 195px;
    height: 105px;
    border: dashed 1px #c0c0c0;
    float: left;
    position: relative;
}

.uploadImgBody :hover {
    border: dashed 1px #00ccff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 195px;
    height: 105px;
    line-height: 105px;
    text-align: center;
}

.inputClass {
    position: absolute;
}
</style>